
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>readOnly and writeOnce Configuration</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    #example-out .entry {
        font-family:courier;
        margin-top:2px;
        margin-left:10px;
    }

    #example-out .header {
        font-weight:bold;
        font-family:arial;
        color:#8dd5e7;
        margin-top:10px;
        margin-bottom:3px;
        margin-left:0px;
    }

    #example-out .subheader {
        font-weight:bold;
        font-family:arial;
        color:#EDFF9F;
    }

    #example-out {
        margin:5px;
        border:1px solid #000;
        color:#ffffff;
        background-color:#004c6d;
        overflow:auto;
        width:30em;
        height:22em;
        padding:2px 5px;
    }
</style>
<script type="text/javascript">
    YUI.namespace("example");
    YUI.example.print = function(msg, cl) {
        var o = document.getElementById("example-out");
        if (o) {
            cl = cl || "";
            o.innerHTML += '<div class="entry ' + cl + '">' + msg + '</div>';
        }
    }
</script>

<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>readOnly and writeOnce Configuration</h1>

<div class="exampleIntro">
	Attributes can be configured to be <code>readOnly</code>, stopping them from being modified by the end user, or <code>writeOnce</code> allowing them to only be set by the end user, but only once. This example demonstrates how to setup attributes for your class as <code>readOnly</code> or <code>writeOnce</code> attributes, and shows how their behavior differs when the end user attempts to set their values.
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="example-out"></div>

<script type="text/javascript">
YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", function(Y) {

    // Shortcut to print (unrelated to example)
    var print = YUI.example.print;

    // Setup a custom class with attribute support
    function MyClass(cfg) {
        this.addAttrs(Y.merge(MyClass.ATTRIBUTES), cfg);
    }

    // Setup attribute configuration
    MyClass.ATTRIBUTES = {
        "foo" : {
            value: "Default Foo",
            readOnly: true
        },
 
        "bar" : {
            value: "Default Bar",
            writeOnce: true
        }
    };

    MyClass.prototype.doSomething = function() {
        // ... Do something which requires
        // MyClass to change the value
        // of foo ...

        // Host code can reset value of 
        // readOnly attributes interally,
        // by working with the private _set
        // property

        this._set("foo", "New Default Foo");
    };

    Y.augment(MyClass, Y.Attribute);

    var o1 = new MyClass({
        foo: "User Foo",
        bar: "User Bar"
    });

    print("Initial Set", "header");
    print("foo value (readOnly):", "subheader");
    print(o1.get("foo"));

    print("bar value (writeOnce):", "subheader");
    print(o1.get("bar"));

    // Attempt to reset values:

    print("Try Setting Again", "header");
    o1.set("foo", "User Reset Foo");
    o1.set("bar", "User Reset Bar");

    print("Final foo value (readOnly)", "subheader");
    print(o1.get("foo"));

    print("Final bar value (writeOnce)", "subheader");
    print(o1.get("bar"));

    print("Set Value Of Foo Interally", "header");
    print("foo value (readOnly):", "subheader");

    o1.doSomething();
    print(o1.get("foo"));

});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
